<template>
  <div class="person-page common-page v-flex-layout" v-loading="!optionsMap" > 
    <div class="query-warp is-auto">
      <my-filter label-width="60px" :columns="5" @submit="searchSubmit" @reset="resetFilter" v-if="optionsMap" >
        <my-input name="name" label="姓名" placeholder="请输入关键字"></my-input>
        <my-radio name="gender" label="性别" :options="optionsMap.gender"></my-radio>
        <my-input name="other" label="其他1"  ></my-input>
        <my-input name="other2" label="其他2" ></my-input>
      </my-filter>
    </div>
     
    <div class="is-flex">
      <div class="inner">
         <my-table toolbar ref="list" fit :columns="columns" :loader="listLoader" 
         :page="1" :page-size="5" 
          :pagination="{'layout': 'total,sizes, ->, prev, pager, next', 'pageSizes': [5, 10]}"
         > 
            <template v-slot:actions>
              <el-button type="primary" size="medium" @click="addClickHandle">新增</el-button>
            </template>
            <template v-slot:expand="scope">
              <div>{{JSON.stringify(scope.row)}}</div>
            </template>  
            <template v-slot:gender="{row}" >
             <span>{{row.gender|formatFilter('genderCode')}}</span>
            </template>
            <template v-slot:city="{row}" >
             <span>{{row.city|formatFilter('CITY')}}</span>
            </template>
            <template v-slot:action="{row}" >
              <el-button type="text" @click="deleteClickHandle(row)">删除</el-button>
              <el-button type="text" @click="updateClickHandle(row)">编辑</el-button>  
            </template>
         </my-table>
      </div>
    </div>

    <my-dialog :visible.sync="modelDialogVisible" 
      :submit-loading="sending"
      v-bind="{...this.modelDialogProps}"   
      @submit="$refs.modelForm.$refs.form.submit()"
      @cancel="$refs.modelForm.$refs.form.reset()"
    >
      <model-form :options="optionsMap" ref="modelForm" @on-submit="formSubmitHandle" ></model-form>
    </my-dialog>
  </div>
</template>
<script>
import PersonMixin from '$my/code/mixin/person'
import ModelForm from '@/components/crud/model-form'
const Cols = [
  { label: '', type: 'expand', prop: 'expand'},
  { label: '姓名', prop: 'name'}, 
  { label: '年龄', prop: 'age'},
  { label: '性别', prop: 'gender'}, 
  { label: '城市', prop: 'city'},
  { label: '开始时间', prop: 'startDate'},
  { label: '结束时间', prop: 'endDate'},
  { label: '操作', prop: 'action'}
]
const DefaultQuery = {}
export default {
  mixins: [PersonMixin],
  components: {
    ModelForm
  },
  props: {
  },
  data() {
    return { 

      optionsMap: null,
      query: JSON.parse(JSON.stringify(DefaultQuery)),
      columns: Cols,
      state: {
        list: [],
        total: 0
      },
      page: 0,
      sending: false,
      modelDialogProps: {
        title: '添加/编辑',
        theme: 'primary',
        target: 'body', 
        icon: 'el-icon-menu', 
        cancelClose: false,     
        draggable: true,
        resizable: false,
        maximizable: true,
        minimizable: false,
        width: '680px', 
        height: '400px'
      },
      modelDialogVisible: false
    }
  },
  computed: {
  },
  methods: {
    searchSubmit(model) {
      console.log(model)
      this.query = {...this.query, ...model}
      this.$nextTick(() => {
        this.$refs.list.refresh()
      }) 
    },
    resetFilter() {
      this.query = JSON.parse(JSON.stringify(DefaultQuery))
    },
    listLoader(page, pageSize) {
      this.page = page 
      const params = {
        page: page, 
        pageSize: pageSize,
        ...this.query
      }
      return this.fetchPerson({
        data: {...params}
      }).then((res) => {
        this.state = {
          list: res.list,
          total: res.total
        }
        return Promise.resolve(res)
      })
    },
    addClickHandle() {
      this.modelDialogVisible = true 
    },
    deleteClickHandle(row) {
      this.removePerson({id: row.id}).then((res) => {
        this.$refs.list.refresh(this.page)
      })
    },
    updateClickHandle(row) {
      this.modelDialogVisible = true
      this.$nextTick(() => {
        this.$refs.modelForm.setModel(row)
      }) 
    },
    formSubmitHandle(data) {
      this.sending = true
      if (data.id) {
        this.updatePersonHandle(data)
      } else { 
        this.addPersonHandle(data)
      }
    },
    addPersonHandle(data) {
      this.addPerson({data: data}).then(() => {
        this.sending = false
        this.modelDialogVisible = false
        this.$refs.list.refresh()
      })
    },
    updatePersonHandle(data) {
      this.updatePerson({data: data}).then(() => {
        this.sending = false
        this.modelDialogVisible = false
        this.$refs.list.refresh(this.page)
      })
    },  
    getDictOpts() {
      this.$getOptionsMap([
        {name: 'city', code: 'CITY'},  
        {
          name: 'gender', 
          code: 'genderCode', 
          custFetch: () => {
            const arr = [
              {dictCode: '0', dictName: '男'},
              {dictCode: '1', dictName: '女'}
            ]
            
            const list = arr.map((item) => {
              return {
                ...item,
                value: item.dictCode,
                label: item.dictName
              } 
            })
            return Promise.resolve(list)
          }
        }
      ]).then((res) => {
        console.log(res, '=====')
        this.optionsMap = res 
      })
    }


  },
  created() {
    this.getDictOpts()
  },
  mounted() {
    
  }
}
</script>
<style lang="scss" scoped>
.person-page{
  padding: 10px;
  .query-warp{
    padding: 5px;
    margin-bottom: 5px; 
  }
}
</style>